<template>
  <div id="producerProducts">
    <topBar></topBar>

    <div class="container my-5">
      <div
        class="
          row
          p-4
          pb-0
          pe-lg-0
          pt-lg-5
          align-items-center
          rounded-3
          border
          shadow-lg
        "
      >
        <h1 class="align-center">农业信息系统</h1>

        <section class="pt-4 pb-0 card-grid">
          <div class="container">
            <div class="row g-4">
              <!-- Left big card -->
              <!-- Right small cards -->
              <div class="col-lg-4">
                <div class="row g-4">
                  <!-- Card item START -->
                  <div class="col-12">
                    <div
                      class="
                        card card-overlay-bottom card-grid-sm card-bg-scale
                      "
                      style="
                        background-image: url(static/img/1.jpg);
                        background-position: center left;
                        background-size: cover;
                      "
                    >
                      <!-- Card Image -->
                      <!-- Card Image overlay -->
                      <div
                        class="
                          card-img-overlay
                          d-flex
                          align-items-center
                          p-3 p-sm-4
                        "
                      >
                        <div class="w-100 mt-auto">
                          <!-- Card category -->
                          <!-- Card title -->
                          <h1 class="text-white">
                            <label
                              ><router-link
                                class="btn-link stretched-link text-reset"
                                :to="{
                                  path: '/',
                                }"
                                >生产者</router-link
                              ></label
                            >
                          </h1>
                          <!-- Card info -->
                          <ul
                            class="
                              nav nav-divider
                              text-white-force
                              align-items-center
                              d-none d-sm-inline-block
                            "
                          ></ul>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- Card item END -->
                </div>
              </div>

              <div class="col-lg-4">
                <div class="row g-4">
                  <!-- Card item START -->
                  <div class="col-12">
                    <div
                      class="
                        card card-overlay-bottom card-grid-sm card-bg-scale
                      "
                      style="
                        background-image: url(static/img/2.jpg);
                        background-position: center left;
                        background-size: cover;
                      "
                    >
                      <!-- Card Image -->
                      <!-- Card Image overlay -->
                      <div
                        class="
                          card-img-overlay
                          d-flex
                          align-items-center
                          p-3 p-sm-4
                        "
                      >
                        <div class="w-100 mt-auto">
                          <!-- Card category -->
                          <!-- Card title -->
                          <h1 class="text-white">
                            <label
                              ><router-link
                                class="btn-link stretched-link text-reset"
                                :to="{
                                  path: '/governmentHome',
                                }"
                                >政府</router-link
                              ></label
                            >
                          </h1>
                          <!-- Card info -->
                          <ul
                            class="
                              nav nav-divider
                              text-white-force
                              align-items-center
                              d-none d-sm-inline-block
                            "
                          ></ul>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- Card item END -->
                </div>
              </div>

              <div class="col-lg-4">
                <div class="row g-4">
                  <!-- Card item START -->
                  <div class="col-12">
                    <div
                      class="
                        card card-overlay-bottom card-grid-sm card-bg-scale
                      "
                      style="
                        background-image: url(static/img/3.jpg);
                        background-position: center left;
                        background-size: cover;
                      "
                    >
                      <!-- Card Image -->
                      <!-- Card Image overlay -->
                      <div
                        class="
                          card-img-overlay
                          d-flex
                          align-items-center
                          p-3 p-sm-4
                        "
                      >
                        <div class="w-100 mt-auto">
                          <!-- Card category -->
                          <!-- Card title -->
                          <h1 class="text-white">
                            <label
                              ><router-link
                                class="btn-link stretched-link text-reset"
                                :to="{
                                  path: '/consumerHomePage',
                                }"
                                >消费者</router-link
                              ></label
                            >
                          </h1>
                          <!-- Card info -->
                          <ul
                            class="
                              nav nav-divider
                              text-white-force
                              align-items-center
                              d-none d-sm-inline-block
                            "
                          ></ul>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- Card item END -->
                </div>
              </div>
            </div>
          </div>

          <br />
        </section>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  daata() {
    return {};
  },
  created() {},
};
</script>

<style scoped>
@import url("../../static/css/style.css");
.align-center {
  text-align: center;
}
</style>